<template>

	<view class="container">


		<view class="banner">

			<image class="logo" src="../../static/logoall3.png"></image>
			<text class="slogan">欢迎加入我们</text>
			<text class="sub-slogan">共创美好明天</text>
		</view>
		<view class="content">
			<text class="title">为什么选择我们？</text>
			<text class="description">我们是一家致力于提供优质服务的公司，我们拥有丰富的经验和专业团队，您将会获得以下好处：</text>
			<view class="benefits">
				<view class="benefit">
					<image class="icon" src="../../static/logoall3.png"></image>
					<text class="benefit-title">创新理念</text>
					<text class="benefit-description">我们将生活中的废弃物进行回收利用，使它们有新的价值。</text>
				</view>
				<view class="benefit">
					<image class="icon" src="../../static/logoall3.png"></image>
					<text class="benefit-title">专业团队</text>
					<text class="benefit-description">我们的团队由经验丰富、技术精湛的专业人员组成，确保为您提供最好的服务。</text>
				</view>
				<view class="benefit">
					<image class="icon" src="../../static/logoall3.png"></image>
					<text class="benefit-title">优质服务</text>
					<text class="benefit-description">我们提供全方位的加盟支持，确保您在合作过程中得到及时帮助。</text>
				</view>
			</view>
			<view class="link">
				<text class="contact-info">联系方式：</text>
				<view class="contact">

					<text class="contact-detail">电话：123456789</text>
				</view>
				<view class="contact">

					<text class="contact-detail">邮箱：example@example.com</text>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {};
		},
		methods: {




			goToBack() {
				uni.navigateTo({
					url: '/pages/my/my'
				})
			},





		}
	};
</script>

<style>
	.container {
		position: relative;
		/* 设置容器为相对定位 */
		height: 100vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 20rpx;
	}

	.container::before {
		content: "";
		position: absolute;
		/* 设置伪元素为绝对定位 */
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(240, 248, 255, 0);
		/* 设置背景颜色及透明度 */
		z-index: -1;
		/* 将伪元素置于下方，使其不遮挡内容 */
	}

	.container::after {
		content: "";
		/* 如果需要，也可以为背景图片的伪元素设置透明度 */
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-image: url(../../static/beijing3.jpg);
		opacity: 0.8;
		/* 设置透明度 */
		z-index: -2;
		/* 将伪元素置于最底部 */
	}


	.banner {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 40rpx;
	}

	.logo {
		width: 200rpx;
		height: 200rpx;
	}

	.slogan {
		font-weight: bold;
		font-size: 36rpx;
		color: #333;
		margin-top: 20rpx;
	}

	.sub-slogan {

		font-size: 28rpx;

		margin-top: 10rpx;
	}

	.content {
		margin-top: 60rpx;
	}

	.title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}

	.description {
		font-size: 28rpx;

		margin-top: 20rpx;
	}

	.benefits {
		display: flex;
		justify-content: space-between;
		margin-top: 40rpx;
	}

	.benefit {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 33.3%;
	}

	.icon {
		width: 120rpx;
		height: 120rpx;
		margin-bottom: 10rpx;
	}

	.benefit-title {
		font-size: 28rpx;
		color: #333;
		margin-top: 10rpx;
		font-weight: bold;
	}

	.benefit-description {
		font-size: 24rpx;

		text-align: center;
		margin-top: 10rpx;
	}

	.link {
		padding-top: 50rpx;
	}

	.contact-info {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-top: 40rpx;
	}

	.contact {
		display: flex;
		align-items: center;
		margin-top: 20rpx;
	}

	.contact-icon {
		width: 40rpx;
		height: 40rpx;
		margin-right: 10rpx;
	}

	.contact-detail {
		font-size: 28rpx;
	}


	.content-title {
		background-color: #fff;
		color: #000;
		font-weight: bold;
		height: 100rpx;
		position: relative;
		font-size: 16px;

		.title-left {
			position: absolute;
			left: 30rpx;
			top: 50%;
			transform: translate(-50%, -50%);
		}

		.title-right {
			text-align: center;
			line-height: 100rpx;
		}
	}
</style>